<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <title>Portfolio</title>
    
    <!-- Font awesome -->
    <link href="css/font-awesome.css" rel="stylesheet">
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <!-- flickity slider -->
    <link href="css/flickity.css" rel="stylesheet">
    <!-- Tosrus slider -->
    <link type="text/css" media="all" rel="stylesheet" href="css/jquery.tosrus.all.css" />
    <!-- Theme color -->
    <link id="switcher" href="css/theme-color/default.css" rel="stylesheet">
    <!-- Main style sheet -->
    <link href="css/main.css" rel="stylesheet">    
    <!-- Google Font -->
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
    

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>  
  <div class="wrapper">
    <!-- Background Photographer image -->
    <div class="hero">
      <div class="hero__back hero__back--static"></div>
      <div class="hero__back hero__back--mover"></div>
      <div class="hero__front"></div>
    </div>   
    <!-- / Background Photographer image -->
    <!-- Start Header -->
    <header id="header">
      <a class="logo" href="index.html">My home page</a>
      <a id="nav-icon" href="#"><span class="fa fa-bars"></span></a>
    </header>
    <!-- / Header -->
    <!-- Start Menu Popup -->
    <div id="menu-popup">
      <a id="close-nav" href="#"><img src="img/close-icon.png" alt=""></a>
      <nav class="nav-menu">
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="portfolio.html">Portfolio</a></li>
          <li><a href="contact.html">Contact</a></li>          
        </ul>        
      </nav>
      <nav class="social-nav">
        <ul>
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="">Google+</a></li>
          <li><a href="">Instagram</a></li>
        </ul>
      </nav>
    </div>
    <!-- / Menu Popup -->
    <!-- Start slider -->
    <div class="stack-slider">
      <div class="stacks-wrapper">
        <!-- Start Fashion Category -->
        <div class="stack">
          <h2 class="stack-title"><a href="#" data-text="摄影"><span>摄影</span></a></h2>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image1">
                <a href="img/sheying/1.jpg" title="拍摄于四川康定">
                  <img src="img/sheying/1.jpg" alt="img01" />
                </a>
              </div>
              <h3 class="item__title">拍摄于四川康定 <span class="item__date">25/01/2018</span></h3>
              <div class="item__details">
                <ul> 
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>                 
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
             <div class="iteam-image1">
                <a href="img/sheying/2.jpg" title="拍摄于四川稻城">
                  <img src="img/sheying/2.jpg" alt="img02" />
                </a>
              </div>
               <h3 class="item__title">拍摄于四川稻城 <span class="item__date">25/01/2018</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>          
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
               <div class="iteam-image1">
                <a href="img/sheying/3.jpg" title="拍摄于重庆洪崖洞">
                  <img src="img/sheying/3.jpg" alt="img03" />
                </a>
              </div>
               <h3 class="item__title">拍摄于重庆洪崖洞 <span class="item__date">08/02/2018</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>           
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
               <div class="iteam-image1">
                <a href="img/sheying/4.jpg" title="拍摄于北京">
                  <img src="img/sheying/4.jpg" alt="img03" />
                </a>
              </div>
               <h3 class="item__title">拍摄于北京<span class="item__date">20/08/2019</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>       
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image1">
                <a href="img/sheying/5.jpg" title="拍摄于张家口 ">
                  <img src="img/sheying/5.jpg" alt="img03" />
                </a>
              </div>
               <h3 class="item__title">拍摄于张家口 <span class="item__date">16/08/2018</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>        
                </ul>
              </div>             
            </div>
          </div>         
        </div>
        <!-- / Fashion Category -->
        <!-- Start Travel Category -->
        <div class="stack">
          <h2 class="stack-title"><a href="#" data-text="编程"><span>编程</span></a></h2>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image2">
                <a href="img/travel/1.jpg" title="梅赛德斯-奔驰网站">
                  <img src="img/travel/1.jpg" alt="img01" />
                </a>
              </div>
              <h3 class="item__title">梅赛德斯-奔驰网站 <span class="item__date">二期答辩项目</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>javasciript</span></li>
                  <li><span>css3</span></li>
                  <li><span>swiper</span></li>
                  <li><span>bootstrap</span></li>       
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image2">
                <a href="img/travel/2.jpg" title="腾讯网（科技）">
                  <img src="img/travel/2.jpg" alt="img02" />
                </a>
              </div>
              <h3 class="item__title">腾讯网（科技）<span class="item__date">二期制作项目</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>javasciript</span></li>
                  <li><span>css3</span></li>
                  <li><span>html-flex布局</span></li>
                  <li><span>bootstrap</span></li>      
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image2">
                <a href="img/travel/3.jpg" title="themes网站">
                  <img src="img/travel/3.jpg" alt="img03" />
                </a>
              </div>
              <h3 class="item__title">themes网站 <span class="item__date">二期制作项目</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>javasciript</span></li>
                  <li><span>css3</span></li>
                  <li><span>html-flex布局</span></li>
                  <li><span>bootstrap</span></li>      
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image2">
                <a href="img/travel/4.jpg" title="云吧网">
                  <img src="img/travel/4.jpg" alt="img01" />
                </a>
              </div>
              <h3 class="item__title">云吧网 <span class="item__date">二期制作项目</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>javasciript</span></li>
                  <li><span>css3</span></li>
                  <li><span>swiper</span></li>
                  <li><span>bootstrap</span></li>      
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image2">
                <a href="img/travel/5.jpg" title="天涯明月刀官网">
                  <img src="img/travel/5.jpg" alt="img05" />
                </a>
              </div>
              <h3 class="item__title">天涯明月刀官网 <span class="item__date">二期制作项目</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>javasciript</span></li>
                  <li><span>css3</span></li>
                  <li><span>swiper</span></li>
                  <li><span>bootstrap</span></li>      
                </ul>
              </div>              
            </div>
          </div>        
        </div>
        <!-- / Travel Category -->
        <!-- Start Food Category -->
        <div class="stack">
          <h2 class="stack-title"><a href="#" data-text="音乐"><span>音乐</span></a></h2>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image3">
                <a href="https://music.163.com/#/song?id=60154&market=baiduqk" title="《他一定很爱你》">
                  <img src="img/food/1.jpg" alt="img01" />
                </a>
              </div>
              <h3 class="item__title">《他一定很爱你》 <span class="item__date">张家旺</span></h3>
              <!-- <div class="item__details">
                <ul>
                  <li><span></span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>     
                </ul>
              </div> -->
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image3">
                <a href="img/food/2.jpg" title="《父亲写的散文诗》">
                  <img src="img/food/2.jpg" alt="img02" />
                </a>
              </div>
              <h3 class="item__title">《父亲写的散文诗》 <span class="item__date">许飞</span></h3>              
              <!-- <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>    
                </ul>
              </div> -->
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image3">
                <a href="img/food/3.jpg" title="《年少有为》">
                  <img src="img/food/3.jpg" alt="img03" />
                </a>
              </div>
              <h3 class="item__title">《年少有为》<span class="item__date">李荣浩</span></h3>
              <!-- <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>        
                </ul>
              </div> -->
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image3">
                <a href="img/food/4.jpg" title="《光辉岁月》">
                  <img src="img/food/4.jpg" alt="img04" />
                </a>
              </div>
              <h3 class="item__title">《光辉岁月》 <span class="item__date">黄家驹</span></h3>
              <!-- <div class="item__details">
                <ul>
                 <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>   
                </ul>
              </div> -->
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image3">
                <a href="img/food/5.jpg" title="《兰花指》">
                  <img src="img/food/5.jpg" alt="img05" />
                </a>
              </div>
              <h3 class="item__title">《兰花指》<span class="item__date">阿里郎</span></h3>
              <!-- <div class="item__details">
                <ul>
                 <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>    
                </ul>
              </div>               -->
            </div>
          </div>         
        </div>
        <!-- / Food Category -->
        <!-- Start Nature Category -->
        <!-- <div class="stack">
          <h2 class="stack-title"><a href="#" data-text="Nature"><span>旅行</span></a></h2>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image4">
                <a href="img/nature/1.jpg" title="Nature Photography One.">
                  <img src="img/nature/1.jpg" alt="img01" />
                </a>
              </div>
              <h3 class="item__title">Nature Photography One <span class="item__date">25/01/2016</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>    
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image4">
                <a href="img/nature/2.jpg" title="Nature Photography Two.">
                  <img src="img/nature/2.jpg" alt="img02" />
                </a>
              </div>
              <h3 class="item__title">Nature Photography Two <span class="item__date">25/01/2016</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>      
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image4">
                <a href="img/nature/3.jpg" title="Nature Photography Three.">
                  <img src="img/nature/3.jpg" alt="img03" />
                </a>
              </div>
              <h3 class="item__title">Nature Photography Three <span class="item__date">25/01/2016</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>     
                </ul>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item__content">
              <div class="iteam-image4">
                <a href="img/nature/4.jpg" title="Nature Photography Four.">
                  <img src="img/nature/4.jpg" alt="img04" />
                </a>
              </div>
              <h3 class="item__title">Nature Photography Four <span class="item__date">25/01/2016</span></h3>
              <div class="item__details">
                <ul>
                  <li><span>Canon PowerShot S95</span><i class="fa fa-camera"></i></li>
                  <li><span>22.5mm</span><i class="fa fa-eye"></i></li>
                  <li><span>&fnof;/5.6</span><i class="fa fa-chrome"></i></li>
                  <li><span>1/1000</span><i class="fa fa-neuter"></i></li>        
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- / Nature Category -->
      </div>
      <!-- /stacks-wrapper -->
    </div>
    <!-- / slider -->
  </div>   -->
   


    <!-- jQuery library -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <!-- Flickity slider -->
    <script src="js/flickity.pkgd.min.js"></script>
    <script src="js/smoothscroll.js"></script>
    <!-- Modernizer -->
    <script src="js/modernizr.custom.js"></script>
    <!-- Integrated Sliding Up Effect -->
    <script src="js/main.js"></script>
    <!-- Tosrus slider -->
    <script type="text/javascript" src="js/jquery.tosrus.min.all.js"></script>
    <!-- Custom js -->
    <script src="js/custom.js"></script>
  </body>
</html>